import { Box } from "@chakra-ui/react";
import { ReactNode } from "react";

interface IProps {
    isActive:boolean;
    children?:ReactNode;
}
// TriangleUpIcon
const CoverWithImage = ({isActive,children}:IProps) => {
    return (
        <>

            <Box bgColor={isActive ? "gray.500" : ""} w="100%" h="100%"
                        opacity={isActive ? 0.5 : 0}
                        position="absolute"
                        zIndex="1"
                    >
                        
                        
            </Box>
            <Box bgColor={isActive ? "white" : ""} w="80px" h="80px" borderRadius="50%" 
                zIndex="2"
                position="absolute" top="50%" left="50%" transform="translate(-50%,-50%)"
                >
                    {isActive && children}
            </Box>
        </>
        
        
    )
}

export default CoverWithImage;
